var userName=document.getElementById("inputOne");
var array=document.getElementsByTagName("span");
var textArea=document.getElementById("textAr");
var pHtml=document.getElementById("pTwo");
var textNow=document.getElementsByTagName("i")[0];
var uNow=document.getElementsByTagName("u")[0];
var username=userName.value;
var footerLast=document.getElementById("footer");
//监听textarea的变化  
textArea.onkeyup=function () {
	var textarea=textArea.value.replace(/\s*/g,"");
	if (textarea.length<=150) {
		uNow.innerHTML="还能输入";
		textNow.style.color="gray";
		textNow.innerHTML=(150-textarea.length);
	} else{
		uNow.innerHTML="已超出";
		textNow.style.color="red";
		textNow.innerHTML=(textarea.length-150);
	}
}
function tijiao () {
	 textarea=textArea.value.replace(/\s*/g,"");
	 username=userName.value.replace(/\s*/g,"");
	if(username.length>8||username.length==0){
		alert("你输入昵称的不合理！请重输入")
		return;
	}
	if (textarea.length==0) {
		alert("内容输入为空");
		return;
	}
	if(textarea.length>150){
		alert("你输入的字太多，超出"+(textarea.length-150)+"个字");
		return;
	}
	textArea.value="";
	userName.value="";
	textNow.innerHTML=150;
	createThings();
	var arrayDiv=document.querySelectorAll("#footer>div");
	var delbutton=document.querySelectorAll("#footer>div>input");
	shanchu(arrayDiv,delbutton);
}
//替换第一个图片的属性
for (var i = 0; i < array.length; i++) {
	(function (a){
		array[a].onclick=function () {	
			for (var j = 0; j < array.length; j++) {
			array[j].className="";
		}
		array[a].className="spanOne";
		}
	})(i);

}
function shanchu(arrayDiv,delbutton){
	for (let i = 1; i < arrayDiv.length; i++) {
			arrayDiv[i].onmouseover=function () {
				delbutton[i-1].style.display="block";
			}
			arrayDiv[i].onmouseleave=function () {
				delbutton[i-1].style.display="none";
			}
			delbutton[i-1].onclick=function () {
				arrayDiv[i].remove(this);
			}
		}
}
// var interval=setInterval(function () {
// 	var arrayDiv=document.querySelectorAll("#footer>div");
// 	var delbutton=document.querySelectorAll("#footer>div>input");
// 	
// 	for (let i = 1; i < arrayDiv.length; i++) {
// 		console.log(delbutton[i-1]);
// 		arrayDiv[i].onmouseover=function () {
// 			delbutton[i-1].style.display="block";
// 		}
// 		arrayDiv[i].onmouseleave=function () {
// 			delbutton[i-1].style.display="none";
// 		}
// 		delbutton[i-1].onclick=function () {
// 			arrayDiv[i].style.display="none";
// 		}
// 	}
// },2000)
//创建节点
function createThings () {
	var photoGet=document.querySelector(".spanOne>img");
	var divLast=document.createElement("div");
	var imgLast=document.createElement("img");
	var iLast=document.createElement("i");
	var uLast=document.createElement("u");
	var dateLast=document.createElement("span");
	var nowdate=new Date();
	var month=nowdate.getMonth()+1;
	var day=nowdate.getDate();
	var hour=nowdate.getHours();
	var min=nowdate.getMinutes();
	var time=month+"月"+day+"日"+" "+hour+":"+min;
	dateLast.innerHTML=time;
	imgLast.src=photoGet.src;
	iLast.innerHTML=username+":";
	uLast.innerHTML=textarea+"。";
	footerLast.appendChild(divLast);
	divLast.appendChild(imgLast);
	divLast.appendChild(iLast);
	divLast.appendChild(uLast);
	divLast.appendChild(dateLast);
	var btn=document.createElement("input");
	btn.value="删除";
	btn.type="button";
	divLast.appendChild(btn);
}
